<template>
  <div class="table-container">
    <el-table
      :data="tableList"
      style="width: 100%"
      ref="table"
      v-loading="loading"
      :max-height="tableHeight"
    >
      <el-table-column
        label="时间"
        align="center"
        type="index"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="date"
        align="center"
        label="水质"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="date"
        align="center"
        label="雨水排口"
        width="180"
      />
      <el-table-column
        prop="date"
        align="center"
        label="污水排口"
        width="180"
      />
      <el-table-column align="center" label="COD">
        <el-table-column
          prop="name"
          align="center"
          label="浓度"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="province"
          align="center"
          label="排放量"
          width="180"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="氨氮">
        <el-table-column
          prop="name"
          align="center"
          label="浓度"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="province"
          align="center"
          label="排放量"
          width="180"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="PH"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        align="center"
        label="小时流量(m³)"
        width="180"
      >
      </el-table-column>
    </el-table>
    <pagination
      v-show="tableList.length>0"
      :total="tableList.length"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="handleQuery"
    />
  </div>
</template>

<script>
export default {
  name: 'TableHour',
  props: {
    tableList: {
      type: Array,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      disableMixinCreated: false,
      tableHeight: null,
      queryParams: {}
    }
  },
  watch: {},
  mounted() {
    this.getTableHeight()
    window.addEventListener('resize', this.getTableHeight)
  },
  methods: {
    getTableHeight() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 110
    },
    handleQuery() {
      this.$emit('ok', this.queryParams)
    }
  }
}
</script>

<style scoped>

</style>
